/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import "../../../../styles/variables.scss";
@import "../../../../styles/mixins.scss";

$enabled-color: $green-02;
$disabled-color: $red-02;

.profile-preview {
  width: inherit;
  padding: 20px;

  .profile-descripion {
    margin-bottom: 20px;
    font-size: 12px;
    color: $grey-04;

    @include multi-line-ellipsis($max-height: 3.5rem);

    .multi-line-text {
      // This will prevent the last line to have any gaps between the text and the ellipsis
      // FIXME: There should be a better way to do this.
      word-break: break-all;
    }
  }
  .grid.grid-container {
    .grid-header {
      color: $grey-04;
      .grid-row {
        &.sub-header {
          grid-template-columns: 2fr 1fr 2fr 1fr 1fr;
          .sub-title {
            border-bottom: 1px solid gray;
            margin-right: 20px;
          }
        }
        > div {
          display: flex;
          align-items: flex-end;
          font-weight: bold;
        }
      }
    }
    .grid-body {
      .provisioner-name {
        line-height: 1;
        vertical-align: middle;
      }
      .truncate-text {
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
      }
    }
    .grid-header,
    .grid-body {
      .grid-row {
        grid-template-columns: 2fr 1fr 0.8fr 1.2fr 1fr 1fr;
      }
      .grid-row,
      .grid-row > div {
        border: 0;
        padding: 0;
        cursor: default;
        &:hover {
          background: inherit;
          cursor: default;
        }

        &.profile-status {
          &.enabled {
            color: $enabled-color;
          }

          &.disabled {
            color: $disabled-color;
          }
        }
      }
    }
  }
}
